<template>
  <view>
    <!-- 扫码选择房台 -->
    <my-modal ref="modal" title="选择房台号" :button="button" @clickBtn="clickBtn">
      <view class="tips">
        <my-icon name="tips" color="#edd2b2" size="16"></my-icon>
        <view class="ml-8">提示 ： 请扫房台二维码或选择房台号</view>
      </view>
      <view class="container">
        <view v-if="ifShowSelectRoomList" class="form-item mb-10">
          <view class="input-title">房台号</view>
          <view class="input-item" @click="openSelectRoomListModal()">
            <input type="number" class="thorui-input" disabled :placeholder="currentRoom ? currentRoom.roomid : '点击选择房台号'" placeholder-class="thorui-phcolor" />
            <my-icon name="arrow-right" size="12" color="#c0c7db" class="pr-10"></my-icon>
          </view>
        </view>

        <view v-if="ifShowScan" class="is-flex-col flex-center" @click="scanRoomQrCode()">
          <image src="/static/images/shop/scan.png" style="width: 90px" mode="widthFix"></image>
          <view class="primary-grey-text mt-5 mb-10 fs-xs" style="color: #6a78a3">扫描房台二维码</view>
        </view>

        <slot></slot>
      </view>
    </my-modal>

    <!-- 房台列表选择房台 -->
    <modal-select-room-list ref="selectRoomListModal" @select="handleSelectRoom"></modal-select-room-list>
  </view>
</template>

<script>
export default {
  props: {
    button: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      // 是否显示模态框关闭按钮
      showClose: true,
      // 1 只显示扫码获取 2 只显示选择房台号获取 3 两者都显示
      showType: null,
      // 只显示选择房台号模式使用
      bid: null,
      // 选中房间号
      currentRoom: null,
      // 是否通过点击按钮事件才向上传递获取的房台号
      ifByClickBtnUploadRoom: false
    }
  },
  computed: {
    ifShowScan() {
      if (this.showType === 2) return false
      return true
    },
    ifShowSelectRoomList() {
      if (this.showType === 1) return false
      return true
    }
  },
  methods: {
    open(param) {
      this.showClose = this.$format(param, 'showClose', true)
      this.bid = this.$format(param, 'bid')
      this.showType = this.$format(param, 'showType', 1)
      this.ifByClickBtnUploadRoom = this.$format(param, 'ifByClickBtnUploadRoom', false)
      this.$refs.modal.open({ showClose: this.showClose })
    },

    handleSelectRoom(currentRoom) {
      this.currentRoom = currentRoom
      this.$refs.selectRoomListModal.close()
    },

    /**
     * 扫描房台二维码
     * 修改 ： 开发阶段先点击跳转选择房台，后期上线变更为扫码
     */
    scanRoomQrCode() {
      return new Promise((resolve, reject) => {
        // 只允许通过相机扫码
        uni.scanCode({
          onlyFromCamera: true,
          success: async res => {
            // console.log('条码类型：' + res.scanType)
            console.log('条码内容：' + res.result)
            const encodeOptions = this.$format(res, 'result')
            if (!encodeOptions) return this.$msg('text', '空二维码')
            const paramObj = this.$utils.param2Obj(encodeOptions)
            console.res('scanCode', paramObj)
            const sortcode = this.$format(paramObj, 'sortcode')
            if (sortcode) {
              console.log('>> 扫码重新请求 <<')
              this.login(sortcode).then(res => {
                this.currentRoom = res

                // 如果非按钮点击模式，扫码完成自动上传获取的房台号到上级 (取酒页面用到)
                if (!this.ifByClickBtnUploadRoom) {
                  this.close()
                  this.$emit('success', res)
                }

                resolve(res)
                console.res('扫码选择了房台号', this.currentRoom)
              })
            } else {
              this.$msg('text', '暂未解析获取到二维码参数')
            }
          },
          fail: err => {
            console.err('scanCode fail', err)
            return reject()
          }
        })
      })
    },

    clickBtn() {
      this.$emit('clickBtn', this.currentRoom)
    },

    close() {
      this.$emit('afterModalClose')
      this.$refs.modal.close()
    },

    openSelectRoomListModal() {
      this.$refs.selectRoomListModal.open({ bid: this.bid })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.tips {
  padding: 10px 10px;
  font-size: $font-size-xs;
  background: #252940;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
</style>
